const path=require('path')
//热更新第二步
const webpack=require('webpack')
//在安装插件后导入插件,第二步
const htmlWebpackPlugin=require('html-webpack-plugin')
// vue-loader在15+以后都要配合下面这个使用，并且要在plugins中new一下
const VueLoaderPlugin = require('vue-loader/lib/plugin')
//这个配置文件就是一个js文件，通过node中的模块操作，向外暴露了一个配置对象
module.exports={
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    devServer:{//这里是设置devserver的第二种方法
        open:true,
        port:3000,
        // contentBase:'src',
        hot:true//热更新第一步

    },
    plugins:[
        new webpack.HotModuleReplacementPlugin(),//热更新第三步
        new htmlWebpackPlugin({//把页面放到内存中去第三步
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        }),
        new VueLoaderPlugin()
    ],
    module:{//这里是设置第三方模块的加载器
        rules:[//先在main.js中引入对应文件，再下载对应加载器，最后在这里设置匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            //loader后面可以问好传参只有图片大小大于limit值，图片才不会转化为base64格式，后面则是规定自己命名，hash值就是为了区分同名文件
            {test:/\.(jpg|png|gif|jpeg)$/,use:'url-loader?limit=12031&name=[hash:8]-[name].[ext]'},
            //bootstrap里面的字体图标
            {test:/\.(ttf|eot|svg|woff2|woff)$/,use:'url-loader'},
            //在安装babel的时候一定要区分版本，要么全部是7版本，要么全是
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
            //这是处理vue文件的加载器规则
            {test:/\.vue$/,use:'vue-loader'}
        ]
    },
    resolve:{//这是修改被导入的包的路径----vue包
        alias:{
            // "vue$":"vue/dist/vue.js"
        }
    }

}